<template>
  <div class="song-detail-container">
    <!-- 导航栏 -->
    <Navbar />

    <!-- 渐变背景 -->
    <div class="gradient-background" v-if="songDetail"
      :style="{ backgroundImage: `linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0)), url(${songDetail.albumpic || songDetail.al.picUrl}?imageView=1&type=webp&quality=80&thumbnail=1920x1080)` }">
      <div class="gradient-overlay"></div>
    </div>

    <div class="song-detail-content">
      <!-- 加载状态 -->
      <div v-if="isLoading" class="loading">
        <div class="loading-spinner"></div>
        <span>{{ $t('songDetail.loading') }}</span>
      </div>

      <!-- 错误状态 -->
      <div v-else-if="errorMessage" class="error">{{ errorMessage }}</div>

      <!-- 歌曲详情内容 -->
      <div v-else-if="songDetail" class="detail-content">
        <!-- 歌曲基本信息 -->
        <div class="song-info-wrapper">
          <div class="song-info">
            <div class="album-cover">
              <img :src="songDetail.albumpic || songDetail.al.picUrl" :alt="songDetail.songname || songDetail.name" />
              <div class="play-button" @click="togglePlay">
                <i class="icon-play">{{ isPlaying ? $t('songDetail.pause') : $t('songDetail.play') }}</i>
              </div>
            </div>

            <div class="song-meta">
              <h1>{{ songDetail.songname || songDetail.name }}</h1>
              <div class="artist-info">
                <span>{{ $t('songDetail.artist') }}：</span>
                <span v-for="(artist, index) in (songDetail.artist || songDetail.ar || songDetail.artists)"
                  :key="artist.id || index">
                  {{ artist.name }}{{ index < (songDetail.artist || songDetail.ar || songDetail.artists).length - 1
                    ? ' / ' : '' }} </span>
              </div>
              <div class="album-info">
                <span>{{ $t('songDetail.album') }}：</span>
                <span>{{ songDetail.al.name || songDetail.albumname }}</span>
              </div>
              <div class="extra-info">
                <div class="release-date">
                  <i class="icon-calendar"></i>
                  <span>{{ formatReleaseDate(songDetail.publishTime) }}</span>
                </div>
                <div class="duration">
                  <i class="icon-clock"></i>
                  <span>{{ formatDuration(songDetail.dt || songDetail.duration) }}</span>
                </div>
              </div>
              <div class="song-actions">
                <button class="action-btn play-all" @click="togglePlay">
                  <i class="icon-play"></i> {{ $t('songDetail.play') }}
                </button>
                <button class="action-btn add-to-playlist" @click="addToPlaylist">
                  <i class="icon-plus"></i> {{ $t('songDetail.favorite') }}
                </button>
                <button class="action-btn download" @click="downloadSong">
                  <i class="icon-download"></i> {{ $t('songDetail.download') }}
                </button>
                <button class="action-btn share" @click="shareSong">
                  <i class="icon-share"></i> {{ $t('songDetail.share') }}
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 歌曲详情内容区 -->
        <div class="content-wrapper">
          <!-- 歌词区域 -->
          <div class="lyrics-section">
            <h2>{{ $t('songDetail.lyrics') }}</h2>
            <div class="lyrics-scroll-container" ref="lyricsContainer">
              <div v-for="(line, index) in lyrics" :key="index" :class="{ active: currentLyricIndex === index }"
                class="lyric-line" :style="{ transform: currentLyricIndex === index ? 'translateX(10px)' : 'none' }">
                {{ line.text }}
              </div>
              <!-- 没有歌词时显示 -->
              <div v-if="lyrics.length === 0" class="no-lyrics">
                {{ $t('songDetail.noLyrics') }}
              </div>
            </div>

            <!-- 进度条 -->
            <div class="progress-container">
              <span class="current-time">{{ formatDuration(currentTime * 1000) }}</span>
              <div class="progress-bar">
                <div class="progress-track"></div>
                <div class="progress-fill" :style="{ width: (currentTime / duration * 100) + '%' }"></div>
                <div class="progress-thumb" :style="{ left: (currentTime / duration * 100) + '%' }"
                  @mousedown="startSeeking"></div>
              </div>
              <span class="total-time">{{ formatDuration(duration * 1000) }}</span>
            </div>
          </div>

          <!-- 右侧信息区 -->
          <div class="side-info">
            <!-- 歌手信息 -->
            <div class="artist-section">
              <h2>{{ $t('songDetail.artistInfo') }}</h2>
              <div class="artist-card" v-if="songDetail.ar && songDetail.ar.length > 0">
                <img :src="getArtistImage(songDetail.ar[0].id)" :alt="songDetail.ar[0].name" class="artist-avatar" />
                <div class="artist-details">
                  <h3>{{ songDetail.ar[0].name }}</h3>
                  <button class="follow-btn">{{ $t('songDetail.follow') }}</button>
                </div>
              </div>
            </div>

            <!-- 相关推荐 -->
            <div class="recommendations">
              <h2>{{ $t('songDetail.recommendations') }}</h2>
              <div class="recommendation-list">
                <div v-for="song in recommendations" :key="song.id" class="recommendation-item"
                  @click="playRecommendedSong(song)">
                  <div class="recommendation-rank">{{ song.rank }}</div>
                  <div class="recommendation-info">
                    <div class="recommendation-title">{{ song.name }}</div>
                    <div class="recommendation-artist">{{ song.ar ? song.ar.map(a => a.name).join(', ') :
                      song.artists.map(a => a.name).join(', ') }}</div>
                  </div>
                  <div class="recommendation-play">
                    <i class="icon-play-small"></i>
                  </div>
                </div>
              </div>
            </div>

            <!-- 评论区域 -->
            <div class="comments-section">
              <h2>{{ $t('songDetail.comments') }}</h2>
              <div class="comments-list">
                <div v-for="comment in comments" :key="comment.id" class="comment-item">
                  <img :src="comment.avatar" :alt="comment.username" class="comment-avatar" />
                  <div class="comment-content">
                    <div class="comment-header">
                      <span class="comment-username">{{ comment.username }}</span>
                      <span class="comment-time">{{ comment.time }}</span>
                    </div>
                    <p class="comment-text">{{ comment.content }}</p>
                    <div class="comment-footer">
                      <button class="like-btn">
                        <i class="icon-like"></i> {{ comment.likes || 0 }}
                      </button>
                    </div>
                  </div>
                </div>
                <div class="more-comments" @click="loadMoreComments" v-if="comments.length > 0">
                  {{ $t('songDetail.viewMoreComments') }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
  import Navbar from '../components/Navbar.vue';

  export default {
    name: 'SongDetail',
    components: {
      Navbar
    },
    data() {
      return {
        songId: '',
        songDetail: null,
        lyrics: [],
        currentLyricIndex: -1,
        recommendations: [],
        isLoading: false,
        errorMessage: '',
        isPlaying: false,
        audioElement: null,
        currentTime: 0,
        duration: 0,
        updateTimeInterval: null,
        comments: [ // 评论数据
          {
            id: 1,
            username: '音乐发烧友',
            avatar: 'https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg',
            content: '这首歌太好听了，已经单曲循环一整天了',
            time: '1天前',
            likes: 128
          },
          {
            id: 2,
            username: '古典音乐爱好者',
            avatar: 'https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg',
            content: '旋律优美，歌词也很打动人心',
            time: '3天前',
            likes: 96
          },
          {
            id: 3,
            username: '流行音乐达人',
            avatar: 'https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg',
            content: '第一次听就爱上了，收藏了',
            time: '1周前',
            likes: 75
          }
        ],
        isSeeking: false // 是否正在拖动进度条
      };
    },
    watch: {
      // 监听路由变化，重新加载歌曲详情
      $route(to, from) {
        if (to.params.id !== from.params.id) {
          this.songId = to.params.id;
          this.fetchSongDetail();
        }
      }
    },
    methods: {
      // 获取歌曲详情
      async fetchSongDetail() {
        if (!this.songId) return;

        try {
          this.isLoading = true;
          this.errorMessage = '';
          // 获取歌曲详情
          const detailResponse = await this.$http.get(`/api/song_detail?ids=${this.songId}`);
          this.songDetail = detailResponse.data.body.songs[0];

          // 获取歌词
          await this.fetchLyrics();

          // 获取推荐歌曲
          await this.fetchRecommendations();

          // 获取歌曲URL并创建音频元素
          await this.createAudioElement();
        } catch (error) {
          console.error('获取歌曲详情失败:', error);
          this.errorMessage = this.$t('songDetail.fetchFailed');
        } finally {
          this.isLoading = false;
          this.$forceUpdate();
        }
      },

      // 获取歌词
      async fetchLyrics() {
        try {
          const response = await this.$http.get(`/api/lyric?id=${this.songId}`);
          const lyricText = response.data.body.lrc.lyric || '';
          this.parseLyrics(lyricText);
        } catch (error) {
          console.error('获取歌词失败:', error);
          this.lyrics = [{ time: 0, text: this.$t('songDetail.noLyrics') }];
        }
      },

      // 解析歌词
      parseLyrics(lyricText) {
        const lyricLines = lyricText.split('\n');
        const lyrics = [];

        lyricLines.forEach(line => {
          // 匹配时间标签和歌词内容
          const timeRegex = /\[(\d+):(\d+\.\d+)\]/g;
          const timeMatches = [...line.matchAll(timeRegex)];
          const text = line.replace(timeRegex, '').trim();

          if (text && timeMatches.length) {
            timeMatches.forEach(match => {
              const minutes = parseInt(match[1]);
              const seconds = parseFloat(match[2]);
              const time = minutes * 60 + seconds;
              lyrics.push({ time, text });
            });
          }
        });

        // 按时间排序
        lyrics.sort((a, b) => a.time - b.time);
        this.lyrics = lyrics;
      },

      // 获取推荐歌曲
      async fetchRecommendations() {
        try {
          const response = await this.$http.get(`/api/simi_song?id=${this.songId}&limit=20`);
          this.recommendations = response.data.body.songs.map((song, index) => ({
            ...song,
            rank: index + 1
          }));
        } catch (error) {
          console.error('获取推荐歌曲失败:', error);
          this.recommendations = [];
        }
      },

      // 创建音频元素
      async createAudioElement() {
        try {
          const response = await this.$http.get(`/api/song_url?id=${this.songId}`);
          const songUrl = response.data.body.data[0].url;
          if (!songUrl) {
            throw new Error('无法获取歌曲URL');
          }

          // 销毁旧的音频元素
          if (this.audioElement) {
            this.audioElement.pause();
            this.audioElement = null;
          }

          // 创建新的音频元素
          this.audioElement = new Audio(songUrl);

          // 添加事件监听
          this.audioElement.addEventListener('timeupdate', this.updateCurrentTime);
          this.audioElement.addEventListener('ended', this.onSongEnded);
          this.audioElement.addEventListener('loadedmetadata', this.onLoadedMetadata);

          // 设置音量
          this.audioElement.volume = 0.7;
        } catch (error) {
          console.error('创建音频元素失败:', error);
          this.errorMessage = this.$t('songDetail.cannotPlay');
        }
      },

      // 切换播放/暂停
      togglePlay() {
        if (!this.audioElement) return;

        if (this.isPlaying) {
          this.audioElement.pause();
        } else {
          this.audioElement.play();
        }

        this.isPlaying = !this.isPlaying;
      },

      // 更新当前播放时间
      updateCurrentTime() {
        if (!this.audioElement) return;

        this.currentTime = this.audioElement.currentTime;
        this.updateLyricIndex();
      },

      // 更新当前歌词索引
      updateLyricIndex() {
        // 找到当前时间对应的歌词索引
        let index = -1;
        for (let i = this.lyrics.length - 1; i >= 0; i--) {
          if (this.lyrics[i].time <= this.currentTime) {
            index = i;
            break;
          }
        }

        if (index !== this.currentLyricIndex) {
          this.currentLyricIndex = index;
          this.scrollToCurrentLyric();
        }
      },

      // 滚动到当前歌词
      scrollToCurrentLyric() {
        if (this.currentLyricIndex === -1 || !this.$refs.lyricsContainer) return;

        const lyricsContainer = this.$refs.lyricsContainer;
        const lyricLines = lyricsContainer.querySelectorAll('.lyric-line');
        const currentLine = lyricLines[this.currentLyricIndex];

        if (currentLine) {
          // 计算滚动位置，使当前歌词居中
          const containerHeight = lyricsContainer.clientHeight;
          const lineHeight = currentLine.clientHeight;
          const lineTop = currentLine.offsetTop;

          const scrollTop = lineTop - containerHeight / 2 + lineHeight / 2;
          lyricsContainer.scrollTo({ top: scrollTop, behavior: 'smooth' });
        }
      },

      // 播放推荐歌曲
      playRecommendedSong(song) {
        // 跳转到该歌曲的详情页
        this.$router.push(`/song/${song.id}`);
      },

      // 添加到播放列表
      addToPlaylist() {
        if (!this.songDetail) return;

        try {
          // 从本地存储获取播放列表
          let playlist = JSON.parse(localStorage.getItem('playlist')) || [];

          // 检查是否已存在
          const isExists = playlist.some(item => item.id === this.songDetail.id);
          if (!isExists) {
            playlist.push(this.songDetail);
            // 保存回本地存储
            localStorage.setItem('playlist', JSON.stringify(playlist));
            alert(this.$t('songDetail.addedToPlaylist'));
          } else {
            alert(this.$t('songDetail.alreadyInPlaylist'));
          }
        } catch (error) {
          console.error('添加到播放列表失败:', error);
          alert(this.$t('songDetail.addFailed'));
        }
      },

      // 下载歌曲
      downloadSong() {
        if (!this.songDetail) return;

        // 这里可以实现歌曲下载逻辑
        alert(this.$t('songDetail.downloadNotImplemented'));
      },

      // 歌曲播放结束事件
      onSongEnded() {
        this.isPlaying = false;
        this.currentTime = 0;
        this.currentLyricIndex = -1;
      },

      // 加载元数据完成事件
      onLoadedMetadata() {
        if (this.audioElement) {
          this.duration = this.audioElement.duration;
        }
      },

      // 格式化发布日期
      formatReleaseDate(timestamp) {
        if (!timestamp) return '';
        const date = new Date(timestamp);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      },

      // 格式化时长（毫秒转分:秒）
      formatDuration(ms) {
        if (!ms) return '0:00';
        const minutes = Math.floor(ms / 60000);
        const seconds = Math.floor((ms % 60000) / 1000);
        return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
      },

      // 开始拖动进度条
      startSeeking() {
        this.isSeeking = true;
        document.addEventListener('mousemove', this.onSeekMove);
        document.addEventListener('mouseup', this.stopSeeking);
      },

      // 拖动进度条过程中
      onSeekMove(e) {
        if (!this.isSeeking || !this.audioElement) return;

        const progressBar = this.$el.querySelector('.progress-bar');
        if (!progressBar) return;

        const rect = progressBar.getBoundingClientRect();
        const relativeX = e.clientX - rect.left;
        let percentage = relativeX / rect.width;
        percentage = Math.max(0, Math.min(1, percentage));

        this.currentTime = percentage * this.duration;
      },

      // 停止拖动进度条
      stopSeeking() {
        if (!this.isSeeking || !this.audioElement) return;

        this.isSeeking = false;
        this.audioElement.currentTime = this.currentTime;
        document.removeEventListener('mousemove', this.onSeekMove);
        document.removeEventListener('mouseup', this.stopSeeking);
      },

      // 分享歌曲
      shareSong() {
        // 实现分享逻辑
        alert(this.$t('songDetail.shareNotImplemented'));
      },

      // 获取歌手图片
      getArtistImage(artistId) {
        // 使用网易云音乐的歌手图片API
        return `https://p1.music.126.net/${artistId % 10000}/artist_avatar${artistId}_300x300.jpg`;
      },

      // 加载更多评论
      async loadMoreComments() {
        try {
          this.isLoading = true;
          // 实际项目中应该调用真实的评论API
          // 这里模拟加载更多评论
          setTimeout(() => {
            // 模拟数据，实际项目中应该从API获取
            this.comments = [
              ...this.comments,
              {
                id: 2,
                username: '音乐达人',
                avatar: 'https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg',
                content: '旋律太美了，歌词也很打动人心',
                time: '3天前'
              },
              {
                id: 3,
                username: '古典爱好者',
                avatar: 'https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg',
                content: '第一次听就爱上了，收藏了',
                time: '1周前'
              }
            ];
            this.isLoading = false;
          }, 500);
        } catch (error) {
          console.error('加载评论失败:', error);
          this.isLoading = false;
        }
      }
    },
    mounted() {
      // 获取路由参数中的歌曲ID
      this.songId = this.$route.params.id;

      // 初始化更新时间的定时器
      this.updateTimeInterval = setInterval(() => {
        if (this.isPlaying && this.audioElement) {
          this.updateCurrentTime();
        }
      }, 100);

      // 获取歌曲详情
      this.fetchSongDetail();
    },
    beforeDestroy() {
      // 清理资源
      if (this.audioElement) {
        this.audioElement.pause();
        this.audioElement.removeEventListener('timeupdate', this.updateCurrentTime);
        this.audioElement.removeEventListener('ended', this.onSongEnded);
        this.audioElement = null;
      }

      // 清除定时器
      if (this.updateTimeInterval) {
        clearInterval(this.updateTimeInterval);
      }
    }
  };
</script>

<style scoped>
  .song-detail-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .song-detail-content {
    flex: 1;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
  }

  /* 加载状态 */
  .loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 0;
  }

  .loading span {
    margin-top: 15px;
    color: #999;
  }

  /* 错误状态 */
  .error {
    text-align: center;
    padding: 100px 0;
    color: #c20c0c;
  }

  /* 歌曲基本信息 */
  .song-info {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    padding: 30px;
    background-color: #f8f8f8;
    border-radius: 10px;
  }

  .album-cover {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
  }

  .album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .album-cover:hover img {
    transform: scale(1.05);
  }

  .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .album-cover:hover .play-button {
    opacity: 1;
  }

  .play-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -50%) scale(1.1);
  }

  .song-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .song-meta h1 {
    font-size: 32px;
    margin-bottom: 20px;
    color: #333;
  }

  .artist-info,
  .album-info {
    font-size: 16px;
    margin-bottom: 10px;
    color: #666;
  }

  .artist-info span:first-child,
  .album-info span:first-child {
    font-weight: bold;
  }

  .song-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
  }

  .action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .play-all {
    background-color: #c20c0c;
    color: white;
  }

  .play-all:hover {
    background-color: #a10a0a;
    transform: translateY(-2px);
  }

  .add-to-playlist,
  .download {
    background-color: white;
    color: #333;
    border: 1px solid #ddd;
  }

  .add-to-playlist:hover,
  .download:hover {
    background-color: #f9f9f9;
    transform: translateY(-2px);
  }

  /* 歌词区域 */
  .lyrics-section {
    margin-bottom: 40px;
    padding: 30px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .lyrics-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
  }

  .lyrics-scroll-container {
    max-height: 400px;
    overflow-y: auto;
    padding: 20px;
    text-align: center;
  }

  .lyric-line {
    padding: 10px 0;
    font-size: 16px;
    color: #666;
    transition: all 0.3s ease;
  }

  .lyric-line.active {
    color: #c20c0c;
    font-size: 18px;
    font-weight: bold;
  }

  /* 相关推荐 */
  .recommendations {
    padding: 30px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .recommendations h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
  }

  .recommendation-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .recommendation-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .recommendation-item:hover {
    background-color: #f9f9f9;
  }

  .recommendation-rank {
    width: 30px;
    font-size: 16px;
    font-weight: bold;
    color: #999;
    text-align: center;
  }

  .recommendation-info {
    flex: 1;
    margin-left: 20px;
  }

  .recommendation-title {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .recommendation-artist {
    font-size: 14px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .recommendation-play {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    opacity: 0;
    transition: all 0.3s ease;
  }

  .recommendation-item:hover .recommendation-play {
    opacity: 1;
    color: #c20c0c;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .song-detail-content {
      padding: 15px;
    }

    .song-info {
      flex-direction: column;
      align-items: center;
      gap: 20px;
      padding: 20px;
    }

    .album-cover {
      width: 150px;
      height: 150px;
    }

    .song-meta {
      text-align: center;
    }

    .song-meta h1 {
      font-size: 24px;
    }

    .song-actions {
      justify-content: center;
      flex-wrap: wrap;
    }

    .lyrics-section,
    .recommendations {
      padding: 20px;
    }

    .lyrics-section h2,
    .recommendations h2 {
      font-size: 20px;
    }

    .lyrics-scroll-container {
      max-height: 300px;
      padding: 10px;
    }

    .lyric-line {
      font-size: 14px;
    }

    .lyric-line.active {
      font-size: 16px;
    }
  }

  /* 768px以下屏幕的响应式设计 */
  @media (max-width: 768px) {
    .container {
      padding: 15px;
    }

    .song-detail {
      flex-direction: column;
      gap: 20px;
    }

    .main-content {
      width: 100%;
    }

    .side-info {
      width: 100%;
    }

    .song-info {
      flex-direction: column;
      align-items: center;
      gap: 20px;
      padding: 20px;
    }

    .album-cover {
      width: 150px;
      height: 150px;
    }

    .song-meta {
      text-align: center;
    }

    .song-meta h1 {
      font-size: 24px;
    }

    .song-actions {
      justify-content: center;
      flex-wrap: wrap;
    }

    .lyrics-section,
    .artist-section,
    .recommendations,
    .comments-section {
      padding: 20px;
    }

    .lyrics-section h2,
    .artist-section h2,
    .recommendations h2,
    .comments-section h2 {
      font-size: 20px;
    }

    .lyrics-scroll-container {
      max-height: 300px;
      padding: 10px;
    }

    .lyric-line {
      font-size: 14px;
    }

    .lyric-line.active {
      font-size: 16px;
    }

    /* 歌手信息 */
    .artist-section {
      padding: 30px;
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }

    .artist-section h2 {
      font-size: 24px;
      margin-bottom: 20px;
      color: #333;
    }

    .artist-card {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .artist-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;
    }

    .artist-details {
      flex: 1;
    }

    .artist-details h3 {
      font-size: 18px;
      margin-bottom: 10px;
      color: #333;
    }

    .follow-btn {
      padding: 8px 20px;
      background-color: #c20c0c;
      color: white;
      border: none;
      border-radius: 20px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .follow-btn:hover {
      background-color: #a10a0a;
    }

    /* 评论区域 */
    .comments-section {
      padding: 30px;
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      margin-top: 20px;
    }

    .comments-section h2 {
      font-size: 24px;
      margin-bottom: 20px;
      color: #333;
    }

    .comments-list {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .comment-item {
      display: flex;
      gap: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #f0f0f0;
    }

    .comment-item:last-child {
      border-bottom: none;
    }

    .comment-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }

    .comment-content {
      flex: 1;
    }

    .comment-header {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 8px;
    }

    .comment-username {
      font-weight: bold;
      color: #333;
    }

    .comment-time {
      font-size: 12px;
      color: #999;
    }

    .comment-text {
      color: #333;
      line-height: 1.6;
      margin-bottom: 10px;
      word-wrap: break-word;
    }

    .comment-footer {
      display: flex;
      align-items: center;
    }

    .like-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px 10px;
      background-color: transparent;
      border: 1px solid #ddd;
      border-radius: 20px;
      font-size: 12px;
      color: #999;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .like-btn:hover {
      color: #c20c0c;
      border-color: #c20c0c;
    }

    .more-comments {
      text-align: center;
      padding: 15px;
      color: #c20c0c;
      cursor: pointer;
      transition: all 0.3s ease;
      border-radius: 8px;
    }

    .more-comments:hover {
      background-color: #f9f9f9;
    }
  }

  /* 768px以下屏幕的响应式设计 */
  @media (max-width: 768px) {
    .container {
      padding: 15px;
    }

    .song-detail {
      flex-direction: column;
      gap: 20px;
    }

    .main-content {
      width: 100%;
    }

    .side-info {
      width: 100%;
    }

    .song-info {
      flex-direction: column;
      align-items: center;
      gap: 20px;
      padding: 20px;
    }

    .album-cover {
      width: 150px;
      height: 150px;
    }

    .song-meta {
      text-align: center;
    }

    .song-meta h1 {
      font-size: 24px;
    }

    .song-actions {
      justify-content: center;
      flex-wrap: wrap;
    }

    .lyrics-section,
    .artist-section,
    .recommendations,
    .comments-section {
      padding: 20px;
    }

    .lyrics-section h2,
    .artist-section h2,
    .recommendations h2,
    .comments-section h2 {
      font-size: 20px;
    }

    .lyrics-scroll-container {
      max-height: 300px;
      padding: 10px;
    }

    .lyric-line {
      font-size: 14px;
    }

    .lyric-line.active {
      font-size: 16px;
    }
  }

  /* 480px以下屏幕的响应式设计 */
  @media (max-width: 480px) {
    .container {
      padding: 10px;
    }

    .album-cover {
      width: 120px;
      height: 120px;
    }

    .song-meta h1 {
      font-size: 20px;
    }

    .song-actions {
      flex-direction: column;
      align-items: center;
    }

    .action-btn {
      width: 100%;
      justify-content: center;
    }

    .lyrics-scroll-container {
      max-height: 250px;
    }

    .lyrics-section h2,
    .artist-section h2,
    .recommendations h2,
    .comments-section h2 {
      font-size: 18px;
    }
  }

  /* 480px以下屏幕的响应式设计 */
  @media (max-width: 480px) {
    .container {
      padding: 10px;
    }

    .album-cover {
      width: 120px;
      height: 120px;
    }

    .song-meta h1 {
      font-size: 20px;
    }

    .song-actions {
      flex-direction: column;
      align-items: center;
    }

    .action-btn {
      width: 100%;
      justify-content: center;
    }

    .lyrics-scroll-container {
      max-height: 250px;
    }

    .lyrics-section h2,
    .artist-section h2,
    .recommendations h2,
    .comments-section h2 {
      font-size: 18px;
    }
  }

  /* 歌手信息 */
  .artist-section {
    padding: 30px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
  }

  .artist-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
  }

  .artist-card {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .artist-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
  }

  .artist-details {
    flex: 1;
  }

  .artist-details h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
  }

  .follow-btn {
    padding: 8px 20px;
    background-color: #c20c0c;
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .follow-btn:hover {
    background-color: #a10a0a;
  }

  /* 评论区域 */
  .comments-section {
    padding: 30px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
  }

  .comments-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
  }

  .comments-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .comment-item {
    display: flex;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
  }

  .comment-item:last-child {
    border-bottom: none;
  }

  .comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }

  .comment-content {
    flex: 1;
  }

  .comment-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 8px;
  }

  .comment-username {
    font-weight: bold;
    color: #333;
  }

  .comment-time {
    font-size: 12px;
    color: #999;
  }

  .comment-text {
    color: #333;
    line-height: 1.6;
    margin-bottom: 10px;
    word-wrap: break-word;
  }

  .comment-footer {
    display: flex;
    align-items: center;
  }

  .like-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background-color: transparent;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 12px;
    color: #999;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .like-btn:hover {
    color: #c20c0c;
    border-color: #c20c0c;
  }

  .more-comments {
    text-align: center;
    padding: 15px;
    color: #c20c0c;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
  }

  .more-comments:hover {
    background-color: #f9f9f9;
  }
</style>